<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>银行卡 - 好运网</title>
</head>
<body>

<div th:fragment="bankList">
    <link rel="stylesheet" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/css/center.css"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>

    <style>
        .bank_manage {
            height: 700px;
            width: 100%;
            overflow: auto;
        }
    </style>

    <div class="tk_nr bank_manage">
        <div class="tk_title" style="height: 72px;line-height: 72px;"><h3>银行卡管理</h3></div>

        <div class="prompt" style="display:none">
            <span><img src="/static/img/member/prompt.png"></span>
            <p>为了阁下的资金安全，在进行提款操作时，我们需要验证阁下的个人信息。<br>请尽快补全<a href="javascript:void(0)">绑定真实姓名，手机号码，邮箱</a>等！</p>
        </div>


        <link rel="stylesheet" href="/js/loading/loading.css">
        <script src="/js/loading/loading.js"></script>
        <script>
            var jiuXiuLoad = new Loading();
            jiuXiuLoad.init();

            $("#bindingBank").click(function () {
                $("#bindingbankdiv").hide();
                $("#bindingbankdivtwo").show();
            })

            function delbank(obj) {
                swal({
                    title: '是否确认删除？',
                    text: "删除后将不可恢复!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    cancelButtonText: '取消',
                    confirmButtonText: '确定删除!'
                }).then((result) => {
                    if (result.value) {
                        var bankId = $(obj).attr("data-bankId");
                        jiuXiuLoad.start();
                        $.ajax({
                            method: "POST",
                            url: "/api/delBank",
                            data: {bankId: bankId},
                            dataType: "json"
                        }).done(function (msg) {
                            jiuXiuLoad.stop();
                            if (msg.status == 'success') {
                                alertGood("银行卡删除成功！")
                                window.location.reload();
                            } else {
                                alertWorning(msg.data)
                            }
                        });
                    }
                });
            }
        </script>


        <div class="manage_box_two" th:if="${not #lists.isEmpty(bankList)}">
            <ul th:each="bank:${bankList}">
                <li>
                    <i class="BOC " th:classappend="${bank.bankId}"><img></i>
                    <span th:text="${bank.userBankName}"></span>
                    (尾号<span th:text="${bank.userBankNo}"></span>)
                    <a th:attr="data-bankId = ${bank.bankId}" onclick="delbank(this)">删除</a>
                </li>
            </ul>
            <div class="add_bank">
                <span id="add_bank">添加一张银行卡</span>
            </div>

            <script>
                $("#add_bank").click(function () {
                    $("#bindingbankdivtwo").show();
                })
            </script>
        </div>


        <div style="margin-bottom:30px; " class="manage_box_three" id="bindingbankdivtwo"
             th:style="${#lists.isEmpty(bankList)}? 'display:block' : 'display:none'">
            <div class="binding_info">
                <h3>添加银行卡</h3>
                <div class="bank_info">
                    <form id="bankForm">
                        <span>
                            <b>银行卡卡号:</b>
                            <input type="text" name="bankNo" class="r_inptut inputwd300">
                        </span>
                        <span>
                            <b>持卡人姓名:</b>
                            <input th:value="${session.loginSession.realName}" name="userName"
                                   readonly="" type="text"
                                   class="r_inptut inputwd300">
                        </span>
                        <span>
                            <b>开户银行:</b>
                            <select id="BankType" name="bankName" class="r_inptut inputwd300">
                                <option value="中国工商银行">中国工商银行</option>
                                <option value="中国建设银行">中国建设银行</option>
                                <option value="中国银行">中国银行</option>
                                <option value="中国农业银行">中国农业银行</option>
                                <option value="交通银行">交通银行</option>
                                <option value="招商银行">招商银行</option>
                                <option value="中信银行">中信银行</option>
                                <option value="中国民生银行">中国民生银行</option>
                                <option value="兴业银行">兴业银行</option>
                                <option value="上海浦东发展银行">上海浦东发展银行</option>
                                <option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
                                <option value="中国光大银行">中国光大银行</option>
                                <option value="平安银行">平安银行</option>
                                <option value="华夏银行">华夏银行</option>
                                <option value="北京银行">北京银行</option>
                                <option value="广发银行">广发银行</option>
                                <option value="上海银行">上海银行</option>
                                <option value="江苏银行">江苏银行</option>
                                <option value="恒丰银行">恒丰银行</option>
                                <option value="浙商银行">浙商银行</option>
                                <option value="南京银行">南京银行</option>
                                <option value="重庆农村商业银行">重庆农村商业银行</option>
                                <option value="盛京银行">盛京银行</option>
                                <option value="徽商银行">徽商银行</option>
                                <option value="宁波银行">宁波银行</option>
                                <option value="上海农商银行">上海农商银行</option>
                                <option value="北京农商银行">北京农商银行</option>
                                <option value="渤海银行">渤海银行</option>
                                <option value="广州农商银行">广州农商银行</option>
                                <option value="哈尔滨银行">哈尔滨银行</option>
                            </select>
                        </span>
                        <span>
                            <b>银行支行:</b>
                            <input type="text" id="BankNo" name="branchBankName" class="r_inptut inputwd300"/>
                        </span>
                    </form>
                </div>

                <div>
                    <button type="button" style="margin-left:0px;margin-top: 5px;" id="addbank_bt" class="as_but inputwd300">添加银行卡
                    </button>

                    <script>
                        $("#addbank_bt").click(function () {
                            var bankForm = $("#bankForm");
                            var bankNo = bankForm.find("input[name='bankNo']").val();
                            if (bankNo.length == 0) {
                                alertWorning("银行卡号不能为空！");
                                return;
                            }
                            var branchBankName = bankForm.find("input[name='branchBankName']").val();

                            if (branchBankName.length == 0) {
                                alertWorning("银行支行不能为空！");
                                return;
                            }

                            jiuXiuLoad.start();
                            $.ajax({
                                method: "POST",
                                url: "/api/addBank",
                                data: $("#bankForm").serializeArray(),
                                dataType: "json"
                            }).done(function (msg) {
                                jiuXiuLoad.stop();
                                if (msg.status == 'success') {
                                    alertGood("银行卡添加成功！")
                                    window.location.reload();
                                } else {
                                    alertWorning(msg.data)
                                }
                            });
                        })

                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
